<template>
  <div class="detail">
    <header-template-phone>
      <template v-slot:left>
        <span class="icon" @click="back">
          <i class="iconfont iconstbar_fanhui"></i>
        </span>
        <span>返回</span>
      </template>
      <template v-slot:center>
        <div class="center-context">
          <span class="text" style="fontSize: 15px">
            详情
          </span>
        </div>
      </template>
    </header-template-phone>
    <div class="main">
      <div class="date box-shadow">
        {{dateFormatter(item.date)}}
      </div>
      <div class="box-shadow list-wrapper">
        <detail-list :item="item">
        </detail-list>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import HeaderBack from '@/components/base/header-back/header-back'
import DetailList from './detail-list'
import { formatDateYMD } from '@/assets/js/util'
import { mapGetters } from 'vuex'
export default {
  components: {
    HeaderTemplatePhone,
    HeaderBack,
    DetailList
  },
  props: {
    item: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      
    }
  },
  methods: {
    back() {
      this.$emit('click')
    },
    dateFormatter(time) {
      return formatDateYMD(time)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (max-width 750px)
    .my-report 
      .main
        box-sizing border-box 
        padding 0 10px
        padding-top 48px 
        .date 
          line-height 48px
          margin-top 10px
          text-align center
          background #fff 
          border-radius 3px 
        .list-wrapper 
          margin-top 10px
          border-radius 3px
          
</style>